<template>
  <div>
    <van-tabs v-model:active="active">
          <van-tab title="全部订单">
        <div v-for="item in orderdata" :key="item.id" class="box"  @click="zhi(item)">
      <div class="top">
        <div>
          <span class="item">{{ item.goods.map(g => g.name).join(', ') }}</span> <!-- 显示所有商品名称 -->
        </div>
        <div>
          <span v-if="item.state === 1" @click="zhi(item.id)">待支付</span>
          <span v-else-if="item.state === 2">已支付</span>
          <span v-else>未知状态</span>
        </div>
      </div>
      <div>
        {{ item.createTime }}
      </div>
      <div>
        {{ item.address.detail_address }} 
        <!-- <button @click="deteleid(item.id)">删除</button> -->
      </div>
    </div>
      </van-tab>
      <van-tab title="待支付">
        <div v-for="item in filteredOrders(1)" :key="item.id" class="box"  @click="zhi(item)">
          <div class="top" style="margin-top:5px,overflow: hidden">
            <div>
              <span>{{ item.goods.map(g => g.name).join(', ') }}</span>
            </div>
            <div>
              <span @click="zhi(item.id)">待支付</span>
            </div>
          </div>
          <div  style="margin-top:5px">{{ item.createTime }}</div>
          <div  style="margin-top:5px">
            {{ item.address.detail_address }}
            <!-- <button @click="deteleid(item.id)">删除</button> -->
          </div>
        </div>
      </van-tab>
      <van-tab title="已支付">
        <div v-for="item in filteredOrders(2)" :key="item.id" class="box"  @click="zhi(item)">
          <div class="top">
            <div>
              <span>{{ item.goods.map(g => g.name).join(', ') }}</span>
            </div>
            <div>
              <span>已支付</span>
            </div>
          </div>
          <div>{{ item.createTime }}</div>
          <div>
            {{ item.address.detail_address }}
            <!-- <button @click="deteleid(item.id)">删除</button> -->
          </div>
        </div>
      </van-tab>
    
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { orderlist, orderdetail } from '../../request/http';
const router = useRouter();
const userInfo = JSON.parse(localStorage.getItem('userInfo'));
const active = ref(0);
const orderdata = ref<any>([]); // 假设这是从某处获取的订单数据
orderlist(0).then((res) => {
  console.log(res);
  orderdata.value = res.data.data;

  orderdata.value.forEach((order) => {
    // 处理商品数据
    if (order.goods) {
      try {
        order.goods = JSON.parse(order.goods);
      } catch (error) {
        console.error('Failed to parse goods:', error);
        order.goods = []; // 如果解析失败，赋值为空数组
      }
    } else {
      order.goods = []; // 如果 goods 是 undefined，赋值为空数组
    }

    // 处理地址数据
    if (order.address) {
      try {
        order.address = JSON.parse(order.address);
      } catch (error) {
        console.error('Failed to parse address:', error);
        order.address = {}; // 如果解析失败，赋值为空对象
      }
    } else {
      order.address = {}; // 如果 address 是 undefined，赋值为空对象
    }
  });

  console.log(orderdata.value);
});
const avatar = userInfo.userInfo.avatar;
const nickname = userInfo.userInfo.nickname;

const filteredOrders = (state) => {
  return orderdata.value.filter(item => item.state === state);
};

const zhi = (item:any) => {
  console.log(item);
  
router.push({ path: `/order`, query: { order: JSON.stringify(item )} });
}

const deteleid = (id:any) => {
  // 处理删除逻辑
};

const tiao = () => {
  router.push('/page');
};
</script>

<style scoped lang="scss">
.box {
  width: 97%;
  height: auto;
  margin: 0 auto;
  background: #faf8f8;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-bottom: 1px solid #ccc;
}
.top {
  display: flex;
  justify-content: space-between;
  
}
.header {
  // 其他样式
}
.item{
  //  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
}
</style>
